<template>
    <div class="invite-list">
        <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh">
            <van-list
              v-model="isUploading"
              :finished="finished"
              :finished-text="finished_text"
              @load="onLoad"
              :offset="10"
            >
            <div class="invite-list-item"  v-for="val in list">
                <div class="avatar">
                    <img :src="val.avatar" :onerror="errorImg" />
                </div>
                <div class="info">
                    <div class="name">{{val.nickname}}</div>
                    <!-- <div class="time">2020.06.19 15:27</div> -->
                </div>
            </div>
            </van-list>
        </van-pull-refresh>    
    </div>
</template>
<script>
import { getInviteRecord } from '@/api/bdchats'    
export default {
    name: "invite",
    data() {
        return { 
            isDownLoading: false,
            isUploading: false,
            finished: false,
            finished_text: "没有更多了",
            list: [],
            totalPages: 1,
            isFirst: true,
            query: {
                pageIndex: 0,
                limit: 10,
            },
            errorImg: 'this.src="https://images.bdchats.com/prod/upload/default-user.png"',
        }
    },
    methods: {
        async getList() {
            await getInviteRecord(this.query).then(response => {
                console.log(response)
                if (this.isFirst) {
                    this.isFirst = false;
                    this.totalPages = response.count/this.query.limit;
                }
                if (this.list.length) {
                    if (this.isUploading) {
                        //上拉加载
                        for (const item of response.data) {
                            const temp = {}
                            temp.avatar =  process.env.VUE_APP_AVATAR_URL + (item.userId % 10000) + '/' + item.userId + '.jpg'
                            temp.nickname = item.recommendUserName
                            this.list.push(temp);
                        }
                        this.$nextTick(() => {
                            this.isUploading = false;
                        });
                        if (this.list.length >= response.count) {
                            this.finished = true;
                        }
                    }
                    if (this.isDownLoading) {
                        //关闭下拉刷新
                        this.isDownLoading = false;
                        this.list = [];
                        for (const item of response.data) {
                            const temp = {}
                            temp.avatar =  process.env.VUE_APP_AVATAR_URL + (item.userId % 10000) + '/' + item.userId + '.jpg'
                            temp.nickname = item.recommendUserName
                            this.list.push(temp);
                        }
                        if (this.finished) {
                            this.finished = false;
                        }
                    }
                } else {
                    if (response.data) {
                        const dataList = response.data;
                        for (const item of dataList) {
                            const temp = {}
                            temp.avatar =  process.env.VUE_APP_AVATAR_URL + (item.userId % 10000) + '/' + item.userId + '.jpg'
                            temp.nickname = item.recommendUserName
                            this.list.push(temp);
                        }
                        if (response.count === 0) {
                            this.finished_text = "暂无数据";
                            this.finished = true;
                        }
                    }
                    this.isUploading = false;
                    this.isDownLoading = false;
                }
            });
        },
        onLoad() {
            if (this.query.pageIndex < this.totalPages) {
                this.query.pageIndex = this.query.pageIndex + 1;
                this.isUploading = true;
                this.getList();
            } else {
                this.finished = true;
                this.isDownLoading = false;
                this.isUploading = false;
            }
        },
        onRefresh() {
            this.finished = false;
            this.isUploading = false;
            this.query.pageIndex = 1;
            this.getList();
        },
    
    }
}    
</script>